<template>
    <h3>------------------组件通信-----------------</h3>
    <!-- 父传子：父：属性传递  孩：props -->
    <!-- <oneComp name="李四"></oneComp> -->
    <!-- 子传父：父：事件传递  孩：emit -->
    <oneComp name="李四" @channel="getSon"></oneComp>
    <!-- 兄弟传值 -->
    <twoComp ref="two"></twoComp>
    <!-- 获取two组件实例 -->
    <button @click="getTwo">获取two组件实例</button>
</template>

<script  setup>
import oneComp from "../components/channel/one.vue"
import twoComp from "../components/channel/two.vue"
import { ref } from "vue"

// 监听孩子传值
function getSon(info) {
    console.log('孩子传递数据是:', info)
}


// 获取two组件实例 操作组件中的属性和方法
let two = ref(null)
function getTwo() {
    console.log(two.value)
}


</script>

<style scoped></style>